<template>
    <div class="min-h-screen relative ">
        <!-- 试卷的基本信息 -->
        <div class="w-full bg-white py-4 px-14 mb-6">
            <span class="font-bold">{{ paperInfo.paperName }}</span>
        </div>
        <!-- 题目批阅的部分 -->
        <div class="w-full  flex space-x-4 ">
            <div class=" w-[calc(100%-320px)] space-y-6">
                <!-- 切换题目的部分 -->
                <div class="px-6 py-4 bg-white rounded-lg">
                    <div class="relative" @click="isSwitchQuestion=!isSwitchQuestion" >
                        <p class="cursor-pointer relative text-[14px] leading-[36px] text-[#3A8BFF] pr-[15px]">切换题目：
                            <span>第{{selectedQuestionIndex+1}}题</span>
                            <el-icon v-if="isSwitchQuestion"><CaretTop /></el-icon>
                            <el-icon v-else><CaretBottom /></el-icon>
                        </p>
                        <div v-if="isSwitchQuestion" class="absolute w-[150px] shadow-md  rounded-md  py-2  top-8 left-0 z-10 bg-white">
                            <ul class="space-y-2 text-gray-500 ">
                                <li v-for="(item,index) in subjectiveQuestions" 
                                :class="['cursor-pointer h-8 leading-8 pl-4 hover:bg-blue-50',selectedQuestionIndex==index?'text-[#3A84FF]':'']"
                                 @click="switchQuestion(item,index)">
                                   第{{ index+1}}题  {{ item.type }}
                                </li>
                            </ul>
                        </div>
                        <!-- 题干部分 -->
                        <div class="text-gray-600 space-y-2">
                            <div>
                                <span>{{ selectedQuestionIndex+1 }}.</span>
                                <span   class="text-gray-400">({{ selectedQuestion.type }},{{ selectedQuestion.score }}分)</span>
                            </div>
                            <div v-show="settingsData.showSubjectiveTitle">
                                <span>{{ selectedQuestion.content }}</span>
                            </div>
                        </div>
                         
                    </div>
                </div>
                <!-- 题目订单和学生答案 -->
                <div class="px-6 py-10 bg-white rounded-lg space-y-8"> 
                    <!-- 学生的信息 -->
                    <div class="border-b pb-6">
                        <div class="flex items-center space-x-3">
                            <img
                            :src="studentInfo.avatarUrl"
                            :alt="studentInfo.name"
                            class="w-11 h-11 rounded-full object-cover"
                            />
                        <div>
                        <div class="font-medium">{{ studentInfo.name }}</div>
                            <div class="text-sm text-gray-400 space-x-2">
                               <span>{{ studentInfo.className }}</span> 
                               <span>{{ studentInfo.studentId }}</span> 
                            </div>
                        </div>
                    </div>
                    </div>
                    <!-- 学生答案 -->
                    <div class="space-y-2">
                        <span class="font-bold">学生答案：</span>
                        <span class="text-sm text-gray-400" v-if="subjectiveAnswers[selectedQuestionIndex] &&settingsData.showStudentWordsCount" >
                            (共{{ subjectiveAnswers[selectedQuestionIndex].answer.length }}字)
                        </span>
                        <div v-if="subjectiveAnswers[selectedQuestionIndex]"   v-html="subjectiveAnswers[selectedQuestionIndex].answer"></div>
                    </div>
                    <!-- 正确答案 -->
                    <div class="text-green-600 space-y-2">
                        <span class="font-bold">正确答案：</span>
                        <div v-html="selectedQuestion.answer"></div>
                    </div>
                </div>
            </div>
            <!-- 批阅部分 -->
            <div class="bg-white w-[320px] overflow-y-auto p-4">
                <div class="mb-4 text-gray-500 flex  items-center space-x-1" @click="isShowSettingOption=!isShowSettingOption">
                    <span>批阅设置</span>
                    <el-icon v-if="isShowSettingOption"><ArrowUpBold /></el-icon>
                    <el-icon v-else><ArrowDownBold /></el-icon>
                </div>
                <div class=" mb-6 text-gray-600" v-if="isShowSettingOption">
                    <div class="flex items-center space-x-3">
                        <el-checkbox v-model="settingsData.showSubjectiveTitle"/><span>显示主观题题干</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <el-checkbox v-model="settingsData.showCorrectAnswer"/><span>显示主观题正确答案</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <el-checkbox v-model="settingsData.showStudentWordsCount"/><span>显示主观题学生作答字数</span>
                    </div>

                </div>
                <p  class="h-2 border-t border-[#F2F2F2]"></p>
                <SubjectiveScore  v-if="subjectiveAnswers[selectedQuestionIndex]"  :baseScore="selectedQuestion.score" 
                v-model:score="subjectiveAnswers[selectedQuestionIndex].score" 
                v-model:questionComment="subjectiveAnswers[selectedQuestionIndex].comment" 
                v-model:questionMark="subjectiveAnswers[selectedQuestionIndex].questionMark"
                />
            </div>
        </div>
        <!-- 底部提交评分并进入下一份试卷 -->
        <div class="fixed bottom-0 z-10 bg-white h-[60px]  w-full py-3 flex justify-center items-center">
            <div class="flex items-center space-x-8  ">
                <span><b class="text-2xl"> 0</b>待批，38已交</span>
                <el-button type="primary" round class="w-20" @click="submitAndNext">下一份</el-button>
            </div>

        </div> 

    </div>
</template>

<script setup>
import { ref, reactive, computed, watch, toRaw, toRefs, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {useQuestionReviewStore} from '@/store/questionReview'
import {reviewByQuestion,reviewByQuestionStudentData} from '@/api/exam'
import  SubjectiveScore from '@/views/exam/examComponents/SubjectiveScore.vue'
const route = useRoute()
const router = useRouter()
const  questionReviewStore = useQuestionReviewStore()
const  paperInfo = ref({paperId:null,paperName:''})
const  subjectiveQuestions = ref()
const  getPaperReviewData =async () => {
  reviewByQuestion(questionReviewStore.paperId).then(res => { 
    console.log(res,'');
    paperInfo.value=res.data.data.paperInfo
    subjectiveQuestions.value=res.data.data.subjectiveQuestions
    selectedQuestion.value = subjectiveQuestions.value[0]
  })
}
//右侧设置按钮的数据
const  settingsData = reactive({
    //显示主观题题干
    showSubjectiveTitle: true,
    //显示主观题正确答案
    showCorrectAnswer: true,
    //显示主观题学生作答字数
    showStudentWordsCount: false
})
//是否显示设置选项的按钮
const isShowSettingOption = ref(false)
//是否切换题目
const isSwitchQuestion = ref(false)
//被选中题目的下标
const selectedQuestionIndex = ref(0)
//被选中题目
const selectedQuestion = ref({})
//切换题目
const switchQuestion = (item,index) => {
    console.log(item,index,'题目切换'); 
    selectedQuestionIndex.value = index
    selectedQuestion.value = item
}

const  studentInfo = ref({})
const  subjectiveAnswers =ref([])
const  getStudentData= async () => {
    reviewByQuestionStudentData(questionReviewStore.paperId).then(res => {
        console.log(res,'学生数据'); 
        studentInfo.value = res.data.data.studentInfo
        subjectiveAnswers.value = res.data.data.subjectiveAnswers
    })
}

const submitAndNext = () => {
    console.log('提交并进入下一份试卷');
}

onMounted(async () => {
    await getPaperReviewData()
     await getStudentData()
})
</script>
<style lang="less" scoped>


</style>